<template>
	<view class="lottery-game">
		<view class="lottery-game__pan" @click="handlePlay">
			<Back :class="animateClass"></Back>
			<Point></Point>
		</view>
		<view class="lottery-game__zuo">
			<image src="https://wx.2024csnl.com/static/lottery2-btm.png"></image>
		</view>
		<view class="lottery-game__play">
			<button class="btn" @click="handlePlay">
				<text>立即抽奖</text>
			</button>
		</view>
		<lottery2-dialog-result :giftText="giftText" v-if="resultDialog.visible" @close="resultDialogClose">
		</lottery2-dialog-result>
	</view>
</template>

<script>
	import Point from './skin/point.vue'
	import Back from './skin/back.vue'

	export default {
		components: {
			Back,
			Point
		},
		props: {
			giftText: {
				type: String,
				default: "",
			}
		},
		data() {
			return {
				isLoading: false,
				isLoaded: false,
				gift: {
					index: null,
					id: null
				},
				resultDialog: {
					visible: false
				},
				audio: {
					control: null,
					url1: 'https://wx.2024csnl.com/assets/lottery2/lottery2-audio__1.mp3',
					url2: 'https://wx.2024csnl.com/assets/lottery2/lottery2-audio__2.mp3',
					url3: 'https://wx.2024csnl.com/assets/lottery2/lottery2-audio__3.mp3',
					url4: 'https://wx.2024csnl.com/assets/lottery2/lottery2-audio__4.mp3'
				}
			}
		},
		computed: {
			animateClass() {
				let name = ''
				if (this.isLoaded) {
					name = `is-disabled`
				} else if (this.isLoading) {
					name = `is-wr${this.gift.index}`
				} else {
					name = ``
				}
				return name
			}
		},
		created() {
			this.audio.control = uni.createInnerAudioContext();
			// 场景音效
			//this.audioPlay(this.audio.url1, true);
		},
		methods: {
			pause() {
				try {
					this.audio.control.pause()
				} catch (e) {}
			},
			stop() {
				try {
					this.audio.control.stop()
				} catch (e) {}
			},
			handlePlay() {
				// 重置样式
				if (this.isLoading) return false
				this.isLoading = true
				this.isLoaded = false
				
				this.$emit('play')
			},
			playGame(gift) {

				console.log(gift)
				
				// 按钮音效
				this.audioPlay(this.audio.url2);
				
				// [模拟接口请求]，这里请求接口，回调
				setTimeout(() => {
					// 转盘音效
					this.audioPlay(this.audio.url3);
					this.gift = {
						index: gift
					}
					// 延迟展示奖品
					setTimeout(() => {
						this.isLoading = true
						this.isLoaded = false
						// 奖品弹层
						this.resultDialog.visible = true
						// 中奖音效
						this.audioPlay(this.audio.url4);
					}, 5000)
				}, 500);
			},
			// 播放轮盘音效
			audioPlay(url, loop = false) {
				const innerAudioContext = this.audio.control;
				console.log('======> ', url)
				innerAudioContext.pause = true
				innerAudioContext.autoplay = true;
				innerAudioContext.loop = loop
				innerAudioContext.src = url;
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
			},
			// 奖品弹层回调
			resultDialogClose() {
				// 初始化
				this.isLoading = false
				this.isLoaded = false
				this.resultDialog.visible = false


				this.$emit('resultDialogClose')
			}
		}
	}
</script>

<style lang="less" scoped>
	.lottery-game {
		position: relative;
		margin: 0 0 20px;

		.lottery-game__pan {
			position: relative;
			width: 90vw;
			height: 90vw;
			z-index: 1;
			margin: 0 auto;
			overflow: hidden;
		}

		.lottery-game__zuo {
			position: relative;
			z-index: 0;
			margin: -5vw 0 0 0;

			image {
				display: block;
				width: 100vw;
				height: 40vw;
			}
		}

		.lottery-game__play {
			position: relative;
			margin: -8vw 20% 0;
			z-index: 2;

			.btn {
				height: 100rpx;
				line-height: 100rpx;
				background: url(https://wx.2024csnl.com/assets/lottery2/lottery2-play.png) center center no-repeat;
				background-size: 100% 100%;

				text {
					font-size: 40rpx;
					font-weight: bold;
					color: #c30800;
				}
			}
		}
	}

	/*
   * 下面的css样式为每个奖品的旋转动画，这里写了对应8个奖品的动画，如果想要更多的话，可以添加
   * 例如： .is-wr8  @keyframes play8
  */
	.is-wr0,
	.is-wr1,
	.is-wr2,
	.is-wr3,
	.is-wr4,
	.is-wr5,
	.is-wr6,
	.is-wr7 {
		animation-duration: 5s;
		animation-timing-function: ease;
		animation-fill-mode: both;
		animation-iteration-count: 1;
	}

	.is-wr0 {
		animation-name: play0;
	}

	.is-wr1 {
		animation-name: play1;
	}

	.is-wr2 {
		animation-name: play2;
	}

	.is-wr3 {
		animation-name: play3;
	}

	.is-wr4 {
		animation-name: play4;
	}

	.is-wr5 {
		animation-name: play5;
	}

	.is-wr6 {
		animation-name: play6;
	}

	.is-wr7 {
		animation-name: play7;
	}

	@keyframes play0 {
		to {
			transform: rotate(calc(5 * 360deg - 360deg / 8 * 0));
		}
	}

	@keyframes play1 {
		to {
			transform: rotate(calc(5 * 360deg - 360deg / 8 * 1));
		}
	}

	@keyframes play2 {
		to {
			transform: rotate(calc(5 * 360deg - 360deg / 8 * 2));
		}
	}

	@keyframes play3 {
		to {
			transform: rotate(calc(5 * 360deg - 360deg / 8 * 3));
		}
	}

	@keyframes play4 {
		to {
			transform: rotate(calc(5 * 360deg - 360deg / 8 * 4));
		}
	}

	@keyframes play5 {
		to {
			transform: rotate(calc(5 * 360deg - 360deg / 8 * 5));
		}
	}

	@keyframes play6 {
		to {
			transform: rotate(calc(5 * 360deg - 360deg / 8 * 6));
		}
	}

	@keyframes play7 {
		to {
			transform: rotate(calc(5 * 360deg - 360deg / 8 * 7));
		}
	}
</style>